<template>
  <div>
    <el-dialog title="新建公海" :visible.sync="dialogVisible" width="80%">
      <div>
        <create-sections title="基本信息">
          <el-form ref="crmForm" :model="fieldForm" :rules="fieldRules" :inline="true">
            <div style="display: flex;">
              <div class="div-flex">
                <el-form-item label="公海名称" style="width:100%">
                  <el-input v-model="fieldForm.name"></el-input>
                </el-form-item>
              </div>

              <div class="div-flex">
                <el-form-item label="公海管理员" style="width:100%">
                  <el-select v-model="value" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div class="div-flex" style="margin-right: 0px;">
                <el-form-item label="公海成员" style="width:100%">
                  <el-input v-model="fieldForm.name"></el-input>
                </el-form-item>
              </div>
            </div>

            <div class="tv-face-zzl">规则设置</div>
            <div class="div-item" style="margin-top: 22px;">
              <el-form-item label="前负责人领取规则">
                <el-radio v-model="radioA" label="2">不限制</el-radio>
                <el-radio v-model="radioA" label="1">限制</el-radio>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="领取频率规则">
                <el-radio v-model="radioA" label="2">不限制</el-radio>
                <el-radio v-model="radioA" label="1">限制</el-radio>
                <el-radio v-model="radioA" label="3">不允许领取</el-radio>
              </el-form-item>

            </div>

            <div>
              <el-form-item label="提醒规则">
                <el-radio v-model="radioA" label="2">不提醒</el-radio>
                <el-radio v-model="radioA" label="1">提醒</el-radio>
              </el-form-item>

            </div>

            <div>
              <el-form-item label="收回规则">
                <el-radio v-model="radioA" label="1">自动回收</el-radio>
                <el-radio v-model="radioA" label="2">不自动回收</el-radio>
              </el-form-item>

            </div>
    
            
           
           
            <el-form-item label="公海字段设置">
              <div class="total-check">
                <div class="tv-face-zzl">选择公海字段</div>
                <el-checkbox-group v-model="fieldForm.type">
                  <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                  <el-checkbox label="地推活动" name="type"></el-checkbox>
                  <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                  <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>


          </el-form>
        </create-sections>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import CreateSections from "@/components/CreateSections";
export default {
  name: "addSeaRole",
  components: { CreateSections },
  props: {
    phone: String,
    action: {
      type: Object,
      default: () => {
        return {
          type: "save",
          id: "",
          data: {},
        };
      },
    },
  },
  data () {
    return {
      dialogVisible: false,
      loading: false,
      radioA: '2',
      fieldRules: {},
      fieldForm: {
        name: '',
        type:[],
      },
      value: '',
    };
  },
  methods: {
    saveSuccess (data) {
      if (data.type == 'customer') {
        // this.handleHandle(data) ---刷新列表
        if (data.createContacts) {
          // this.createType = 'contacts'
          this.createAction = {
            type: 'relative',
            crmType: 'customer',
            data: {
              customer: data.data
            }
          }
          this.createShow = true
        }
      }
    },
    showFun () {
      this.dialogVisible = true;

    },
    closeFun () {
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  color: #5A607F;
}



.div-flex {
  flex: 1;
  margin-right: 22px;

  ::v-deep .el-form-item__content {
    width: 100%;
  }
}

.total-check {
  border: #D7DBEC 1px solid;
  border-radius: 4px;
  padding: 22px 32px;
}
.div-item{

}
</style>